<!-- 体尺测定列表 -->
<template>
  <el-row style="margin-top: 1px;">
    <el-col :span="6">
        耳号: <el-input v-model="input" style="width: 200px;"></el-input>
      </el-col>
      <el-col :span="6" >
        品种:<el-select
          v-model="form.varietyId"
          placeholder="请选择品种"
          style="width: 200px">
          <el-option
            v-for="item in varietyData"
            :key="item.varietyId"
            :label="item.varietyName"
            :value="item.varietyId"
          /> </el-select>
      </el-col>
      <el-col :span="6">
        <el-form-item label="性别:" >
      <el-select  style="width: 200px">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-button type="danger">查询</el-button>
        <el-button >重置</el-button>
      </el-col>
  </el-row>
  <div style="background-color: gainsboro;height: 5px;"></div>
  <div style="margin-top: 5px;">
      <el-button type="danger" style="float: left;;margin-left: 10px;">+ 新增</el-button>&emsp;
      <el-button type="danger" :icon="Delete" style="float: left;;margin-left: 10px;">删除</el-button>
  </div>
  <br />
  <h2 style="background-color:mistyrose;font-size: 15px;border: 1px solid red;">&emsp;已选择 {{ form1.num }} 项</h2>
  <div style="background-color: gainsboro;height: 5px;margin-top: 5px;"></div>
  <el-table :data="tableData"   border style="width: 100%;margin-top: 5px;border-top: 3px solid red;" @selection-change="handleSelectionChange">
      <el-table-column type="selection" />
      <el-table-column prop="bodyMeanId"  label="序号" >
        <template  #default="{$index}">
          {{ $index+1 }}
        </template>
      </el-table-column>
      <el-table-column prop="earNumber" label="耳号" />
      <el-table-column prop="varietyName" label="品种" />
      <el-table-column prop="gender" label="性别" >
        <template #default="scope">
            <span v-if="scope.row.gender==1">男</span>
            <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column prop="cottageName" label="测定栋舍" width="90px" />
      <el-table-column prop="fieIdName" label="测定栏位" width="90px" />
      <el-table-column prop="bodyMeanDate" label="测定日期" width="90px" />
      <el-table-column prop="name" label="测定日龄" width="90px" />
      <el-table-column prop="bodyTall" label="身高(cm)" />
      <el-table-column prop="bodyLength" label="体长(cm)" />
      <el-table-column prop="bodyBust" label="胸围(cm)" />
      <el-table-column prop="bodyPipe" label="管围(cm)" />
      <el-table-column prop="bodyScrotal" label="阴囊围(cm)" width="110px" />
      <el-table-column prop="bodyBackfat" label="背膘厚度(cm)" width="110px" />
      <el-table-column prop="eyeArea" label="眼肌面积(cm)" width="110px" />
      <el-table-column prop="eyeWidth" label="眼肌宽度(cm)" width="110px" />
      <el-table-column prop="name" label="创建人" />
      <el-table-column prop="name" label="创建时间" width="110px" />
      <el-table-column prop="name" label="修改人" />
      <el-table-column prop="name" label="修改时间" width="110px" />
      <el-table-column fixed="right" prop="name" label="操作" />
  </el-table>


    
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();

const form=reactive({
start:'',
varietyId:''
})

const tableData=ref([])
const getData=()=>{
  axios.get('http://localhost:5039/api/SleepWeight/SearchBodyMean').then(res=>{
    console.log(res)
    tableData.value=res.data.data
  })
}

const form1=reactive({
  num:0
})
const handleSelectionChange=(val:any)=>{
  console.log(val)
  form1.num=val.length
}

//品种
const varietyData:any=ref([])
onMounted(()=>{
  getData()
})
</script>